<template>
    <div class="count-bar">
        <img src="@/assets/images/count-card/lt.svg" class="icon lt">
        <img src="@/assets/images/count-card/rt.svg" class="icon rt">
        <img src="@/assets/images/count-card/lb.svg" class="icon lb">
        <img src="@/assets/images/count-card/rb.svg" class="icon rb">
        <div class="bar-box">{{ name }}</div>
        <div class="bar-item" v-for="(value, key) in info" :key="key">
            <div class="bar-item_label">{{ key }}:</div>
            <div class="bar-item_num">{{ value }}</div>
        </div>
    </div>
</template>

<script setup lang="js">
defineProps({
    name: {
        type: String,
        require: true
    },
    info: {
        type: Object,
        require: true
    }
})
</script>
<style scoped lang="scss">
$horn-distance: -3px;

.count-bar {
    display: flex;
    align-items: center;
    width: vw(1118);
    height: vh(56);
    position: relative;
    border-radius: vw(11);
    background: rgba(23, 55, 67, 0.54);
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(115, 162, 99, 0.49), rgba(156, 214, 194, 0.49)) 1 1;

    .bar-box {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: vw(18);
        color: #000000;
        padding: vh(12) vw(15);
        background-color: #B3DD4D;
        margin-left: vw(4);
        border-radius: vw(11);
    }

    .bar-item {
        display: flex;
        align-items: center;
        margin-left: vw(20);

        .bar-item_label {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: vw(18);
            color: #BDCFE7;
        }

        .bar-item_num {
            font-family: BMDoHyeon, BMDoHyeon;
            font-weight: normal;
            font-size: vw(24);
            color: #FFFFFF;
            letter-spacing: 1px;
            text-shadow: 0px 0px 8px #105457;
            text-stroke: 1px #3472CD;
            text-align: left;
            font-style: normal;
            -webkit-text-stroke: 1px #3472CD;
            margin-left: vw(15);
        }
    }

    .icon {
        width: vw(15);
        position: absolute;
    }

    .lt {
        left: $horn-distance;
        top: $horn-distance;
    }

    .rt {
        right: $horn-distance;
        top: $horn-distance;
    }

    .lb {
        left: $horn-distance;
        bottom: $horn-distance;
    }

    .rb {
        right: $horn-distance;
        bottom: $horn-distance;
    }
}
</style>